<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }

        .media-object {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }

    </style>
</head>
<body>

<section id="media-left">
    <article class="media">
        <article class="media-left media-top">
            <img src="../../image/img-test.jpg" class="media-object" alt=""/>
        </article>

        <article class="media-body">
            <h2 class="media-heading">文章标题</h2>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
        </article>
    </article>

    <article class="media">
        <article class="media-left media-middle">
            <img src="../../image/img-test.jpg" class="media-object" alt=""/>
        </article>

        <article class="media-body">
            <h2 class="media-heading">文章标题</h2>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
        </article>
    </article>

    <article class="media">
        <article class="media-left media-bottom">
            <img src="../../image/img-test.jpg" class="media-object" alt=""/>
        </article>

        <article class="media-body">
            <h2 class="media-heading">文章标题</h2>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            <p>文文文文文章章章章章章内内内内内容容容容容容</p>
        </article>
    </article>
</section>

<section id="media-list">
    <ul class="media-list">
        <li class="media">
            <article class="media-left">
                <img src="../../image/img-test.jpg" class="media-object" alt=""/>
            </article>
            <article class="media-body">
                <h2 class="media-heading">文章标题</h2>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            </article>
        </li>
        <li class="media">
            <article class="media-left">
                <img src="../../image/img-test.jpg" class="media-object" alt=""/>
            </article>
            <article class="media-body">
                <h2 class="media-heading">文章标题</h2>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            </article>
        </li>
        <li class="media">
            <article class="media-left">
                <img src="../../image/img-test.jpg" class="media-object" alt=""/>
            </article>
            <article class="media-body">
                <h2 class="media-heading">文章标题</h2>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
                <p>文文文文文章章章章章章内内内内内容容容容容容</p>
            </article>
        </li>
    </ul>
</section>

<script src="../../jquery/jquery-3.2.1.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>